<script setup lang='ts'>
import http from '../../api/http'
import {ref} from 'vue'
import { storeToRefs } from 'pinia'
import store from '../../store/index'
import { ElMessage } from 'element-plus'
import { apiBaseURL, imgBaseURL } from '../../api/baseURL'
const {user} =storeToRefs(store())
console.log(user.value)
var username=user.value.userName;
 var uid=user.value.userID
var img=user.value.imgPath
const yuan=ref('')
 const shu=ref('')
   const xin=ref('')
   var imgId=''
   var path=''
//#region 头像上传
const handleAvatarSuccess = (res: any) => {
     imgId = res.data.imgId;
    path = res.data.path
     http.put('user/tp',{imgId:imgId,uid:uid.value}).
     then(res=>{
        if(res.code=='1'){
             ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    location.href="/login"
        }else{
            ElMessage.error('账号或密码错误')
        }
     })
}
const tj=()=>{
    if(yuan.value==""||xin.value==""||shu.value==""){
         ElMessage.error('密码输入有误')
         return
    }else{
        if(yuan.value!=shu.value){
              ElMessage.error('两此密码不一致')
         return
        }
    }
     http.put('user/gai',{uid:uid.value,pwd:xin.value}).
     then(res=>{
        if(res.code=='1'){
             ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    location.href="/login"
        }else{
            ElMessage.error('账号或密码错误')
        }
     })
   }
//上传之前
const beforeAvatarUpload = (file: any) => {
    const isJPG = file.type === 'image/jpeg'
    const isPNG = file.type === 'image/png'

    const isLtMB = file.size / 1024 / 1024 < 10

    if (!isJPG && !isPNG) {
        ElMessage.error('上传头像图片只能是 JPG 和 PNG 格式!')
    }
    if (!isLtMB) {
        ElMessage.error('上传头像图片大小不能超过 10MB!')
    }
    return (isJPG || isPNG) && isLtMB
}

</script>

<template>
<el-descriptions title="Width horizontal list" border>
    <el-descriptions-item
      :rowspan="2"
      :width="140"
      label="Photo"
      align="center"
    >
       <el-upload class="avatar-uploader" :action="apiBaseURL + 'Upload'" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="img" :src="imgBaseURL+img" class="avatar">
                    <el-icon v-else class="avatar-uploader-icon el-upload">
                        <Plus />
                    </el-icon>
                </el-upload>
    </el-descriptions-item>
    <el-descriptions-item label="用户名称">{{ username }}</el-descriptions-item>
  </el-descriptions>
<div style="width:200px;margin-top: 50px;">
    <el-input v-model="yuan" placeholder="请输入原始密码"></el-input>
    <el-input v-model="shu" placeholder="请输入二次密码"></el-input>
<el-input v-model="xin" placeholder="请输入新密码"></el-input>
    <el-button type="success" style="margin-left:40px" @click="tj">提交</el-button>
</div>
</template>


<style scoped>
</style>